<!--
 * @Author: 蔡继周
 * @Date: 2021-11-16 09:06:22
 * @LastEditTime : 2021-11-29 10:51:34
 * @LastEditors  : Shaquille.Cai
 * @Description: I have to do something...
 * @FilePath     : \\vue3-admin-with-blog\\src\\components\\FormTep\\index.vue
-->
<template>
  <el-form :model="formData" label-width="120px" ref="formDom">
    <el-row :gutter="20">
      <template v-for="item in formList">
        <el-col
          v-if="!item.noShow"
          :key="item.name"
          :span="item.span || 24"
          :offset="item.offset || 0"
        >
          <component
            :is="compontents[item.type]"
            :column="item"
            v-model:model="formData[item.name]"
            v-if="!item.hide"
          />
        </el-col>
      </template>
      <slot name="content"> </slot>
    </el-row>
  </el-form>
</template>
<script >
import { ref, onMounted, defineComponent, nextTick } from "vue";
import TextMoudel from "./itemView/TextMoudel.vue";
import RadioGroupMoudel from "./itemView/RadioGroupMoudel.vue";
import CheckboxMoudel from "./itemView/CheckboxMoudel.vue";
import RateMoudel from "./itemView/RateMoudel.vue";
import SelectMoudel from "./itemView/SelectMoudel.vue";
import TimeSelectMoudel from "./itemView/TimeSelectMoudel.vue";
import DateTimePickerMoudel from "./itemView/DateTimePickerMoudel.vue";
import UploadMoudel from "./itemView/UploadMoudel.vue";
import CheckboxSingleMoudel from "./itemView/CheckboxSingleMoudel.vue";
import CascaderMoudel from "./itemView/CascaderMoudel.vue";

export default defineComponent({
  props: {
    //表单类型及配置
    formList: {
      type: Array,
      default: () => [],
    },
    //表单字段
    formData: {
      type: Object,
      default: () => {},
    },
  },
  emits: {
    validate: null,
  },
  components: {
    TextMoudel,
    RadioGroupMoudel,
    CheckboxMoudel,
    RateMoudel,
    SelectMoudel,
    TimeSelectMoudel,
    DateTimePickerMoudel,
    UploadMoudel,
    CheckboxSingleMoudel,
    CascaderMoudel,
  },
  setup(props) {
    // const modules = import.meta.glob("./itemView/*.vue");
    // // 因为通过 import.meta.globEager 返回的列表不能迭代所以直接使用 Object.keys 拿到 key 遍历
    // Object.keys(modules).forEach((c) => {
    //   const component = modules[c]?.default;
    //   // 挂载全局控件
    //   console.log(c);
    //   console.log(modules[c]);
    // });
    let formDom = ref(null);
    let compontents = {
      //动态组件
      TextMoudel: "TextMoudel",
      RadioGroupMoudel: "RadioGroupMoudel",
      CheckboxMoudel: "CheckboxMoudel",
      RateMoudel: "RateMoudel",
      SelectMoudel: "SelectMoudel",
      TimeSelectMoudel: "TimeSelectMoudel",
      DateTimePickerMoudel: "DateTimePickerMoudel",
      UploadMoudel: "UploadMoudel",
      CheckboxSingleMoudel: "CheckboxSingleMoudel",
      CascaderMoudel: "CascaderMoudel",
    };
    const submitForm = () => {
      //validate表单
      return formDom.value
        .validate()
        .then(() => {
          return true;
        })
        .catch((err) => {
          return false;
        });
    };
    const validateField = (arg) => {
      //验证部分表单
      formDom.value.validateField(arg, (value) => {
        if (value) {
          return false;
        } else {
          return true;
        }
      });
    };
    const clearValidate = () => {
      //清除验证结果
      formDom.value.clearValidate();
    };
    const stillMoreHandle = () => {
      //更多操作
      console.log("当前表单数据===>", props.formData);
    };
    onMounted(() => {
      //初始化表单避免触发方式为change的自运行validate
      nextTick(() => {
        clearValidate();
      });
    });

    return {
      formDom,
      submitForm,
      compontents,
      clearValidate,
      validateField,
      stillMoreHandle,
    };
  },
});
</script>
<style scoped></style>
